<template>
  <el-form novalidate :model="form" :rules="rules">
    <b-form-group
      :label="$t('pageServerPowerOperations.bootSettings.bootSettingsOverride')"
      label-for="boot-option"
      class="mb-3"
    >
      <b-form-select
        id="boot-option"
        v-model="form.bootOption"
        :disabled="bootSourceOptions.length === 0"
        :options="bootSourceOptions"
        @change="onChangeSelect"
      >
      </b-form-select>
    </b-form-group>
    <el-form-item
      :label="$t('pageServerPowerOperations.bootSettings.bootSettingsOverride')"
    >
      <el-select
        v-model="form.bootOption"
        :disabled="bootSourceOptions.length === 0"
        class="w-40"
      >
        <el-option
          v-for="(option, index) in bootSourceOptions"
          :label="option"
          :value="option"
          :key="index"
        />
      </el-select>
    </el-form-item>

    <el-form-item prop="type">
      <el-checkbox v-model="form.oneTimeBoot" name="type">
        {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
      </el-checkbox>
    </el-form-item>

    <el-button type="primary" @click="handleSubmit" class="mb-3">
      {{ $t('global.action.save') }}
    </el-button>
  </el-form>
</template>

<script setup lang="ts">
import { useServerBootSettings } from '@/store/Settings/BootSettingsStore';
import useVuelidateTool from '@/hooks/useVuelidateTool';

import _ from 'lodash';

const { useVuelidate, elementInputValidator } = useVuelidateTool();
const serverBootSettingsStore = useServerBootSettings();
const form = reactive({
  bootOption: serverBootSettingsStore.bootSource,
  oneTimeBoot: serverBootSettingsStore.overrideEnabled,
  tpmPolicyOn: serverBootSettingsStore.tpmEnabled,
});
const v$ = useVuelidate(
  {
    bootOption: {},
    oneTimeBoot: {},
    tpmPolicyOn: {},
  },
  form,
);
const rules = computed(() => {
  return {
    bootOption: {
      trigger: 'change',
      validator: elementInputValidator.value(v$, 'bootOption'),
    },
    oneTimeBoot: {
      trigger: 'change',
      validator: elementInputValidator.value(v$, 'oneTimeBoot'),
    },
    tpmPolicyOn: {
      trigger: 'change',
      validator: elementInputValidator.value(v$, 'tpmPolicyOn'),
    },
  };
});

const bootSource = computed(() => serverBootSettingsStore.bootSource);
const overrideEnabled = computed(() => serverBootSettingsStore.overrideEnabled);
const tpmEnabled = computed(() => serverBootSettingsStore.tpmEnabled);
const bootSourceOptions = computed(() => {
  const options = serverBootSettingsStore.bootSourceOptions;
  _.pullAll(options, ['Cd', 'Diags', 'BiosSetup']);
  return options;
});
watch(bootSource, (value) => {
  form.bootOption = value;
});
watch(overrideEnabled, (value) => {
  form.oneTimeBoot = value;
});
watch(tpmEnabled, (value) => {
  form.tpmPolicyOn = value;
});
onMounted(() => {
  serverBootSettingsStore.getTpmPolicy();
});
const handleSubmit = () => {
  const tpmPolicyChanged = v$.value.form.tpmPolicyOn.$dirty;
  let settings;
  let bootSource = form.bootOption;
  let overrideEnabled = form.oneTimeBoot;
  let tpmEnabled = null;

  if (tpmPolicyChanged) tpmEnabled = form.tpmPolicyOn;
  settings = { bootSource, overrideEnabled, tpmEnabled };

  serverBootSettingsStore
    .saveSettings(settings)
    .then((message: string) =>
      ElNotification({
        message,
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) =>
      ElNotification({
        message,
        type: 'error',
      }),
    );
};
const onChangeSelect = (selectedOption: string) => {
  // Disable one time boot if selected boot option is 'None'
  if (selectedOption === 'None') form.oneTimeBoot = false;
};
</script>
